<template>
	<div class="map"  >
		<div  id="container"></div>
	</div>
</template>

<script>
    export default{
        name:'news',
        data() {
            return {
                longitude:0,//经度
                latitude:0,//纬度
                city:''
            }
        },
		created() {
			var  query  = this.$route.query;
			this.longitude   = query.lng;
			this.latitude    = query.lat;
		
		},
        methods:{
  //第一部分
              //定位获得当前位置信息
            getMyLocation() {
                var geolocation = new qq.maps.Geolocation("TWSBZ-D5LL3-O5B3E-YMH73-6YKH5-JLB6R", "手机浏览器");
                geolocation.getIpLocation(this.showPosition, this.showErr);
                //geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比较高
            },
            showPosition(position) {
                console.log(position);
                // this.latitude = position.lat;
                // this.longitude = position.lng;
                this.city = position.city;
                this.setMap();
            },
            showErr() {
                console.log("定位失败");
                this.getMyLocation();//定位失败再请求定位，测试使用
            },
//第二部分
        //位置信息在地图上展示
            setMap() {
                //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                //设置地图中心点
                var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
                //定义工厂模式函数
                var myOptions = {
                  zoom: 13,               //设置地图缩放级别
                  center: myLatlng,    //设置中心点样式
                  mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
                }
                // //获取dom元素添加地图信息
                var map = new qq.maps.Map(document.getElementById("container"), myOptions);
//第三部分
              //给定位的位置添加图片标注
                var marker = new qq.maps.Marker({
                    position: myLatlng,
                    map: map
                });
                //给定位的位置添加文本标注
                var marker = new qq.maps.Label({
                    position: myLatlng,
                    map: map,
                    content:''
                });
            }
          },
        mounted() {
            this.getMyLocation();
            }
        }
</script>

<style>
	.map {
		width: 750rpx;
		height: 400rpx;
	}
	#container {
		width: 100%;
		height: 100vh;
	}
</style>